<template>
  <el-drawer
    v-model="visible"
    title="住户详情"
    size="500px"
    @close="handleClose"
  >
    <div class="resident-detail" v-loading="loading">
      <template v-if="residentInfo">
        <el-descriptions :column="1" border>
          <el-descriptions-item label="住户编号">
            {{ residentInfo.residentNo }}
          </el-descriptions-item>
          <el-descriptions-item label="住户姓名">
            {{ residentInfo.name }}
          </el-descriptions-item>
          <el-descriptions-item label="身份证号">
            {{ residentInfo.idCard || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="手机号">
            {{ residentInfo.phone || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="性别">
            {{ getGenderText(residentInfo.gender) }}
          </el-descriptions-item>
          <el-descriptions-item label="出生日期">
            {{ residentInfo.birthDate || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="住户类型">
            <el-tag :type="getResidentTypeTagType(residentInfo.residentType)" size="small">
              {{ getResidentTypeText(residentInfo.residentType) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="住户状态">
            <el-tag :type="getResidentStatusTagType(residentInfo.residentStatus)" size="small">
              {{ getResidentStatusText(residentInfo.residentStatus) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="入住日期">
            {{ residentInfo.checkInDate || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="搬出日期">
            {{ residentInfo.checkOutDate || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="紧急联系人">
            {{ residentInfo.emergencyContact || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="紧急联系电话">
            {{ residentInfo.emergencyPhone || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="备注">
            {{ residentInfo.remark || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="创建时间">
            {{ residentInfo.createTime }}
          </el-descriptions-item>
          <el-descriptions-item label="更新时间">
            {{ residentInfo.updateTime }}
          </el-descriptions-item>
        </el-descriptions>
        
        <!-- 住户关系 -->
        <div class="relation-section" v-if="relationList.length > 0">
          <h4>住户关系</h4>
          <el-table :data="relationList" border stripe>
            <el-table-column prop="relatedResidentName" label="关联住户" />
            <el-table-column prop="relationType" label="关系类型">
              <template #default="{ row }">
                {{ getRelationTypeText(row.relationType) }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </template>
      
      <el-empty v-else description="暂无住户信息" />
    </div>
  </el-drawer>
</template>

<script setup lang="ts">
/**
 * 住户详情组件
 * @author Wu.Liang
 * @date 2025-07-28
 */
import { ref, computed, watch } from 'vue'
import { residentApi } from '@/api/resident'
import { showMessage } from '@/utils/message'

// 定义props
interface Props {
  visible: boolean
  residentId: number
}

const props = withDefaults(defineProps<Props>(), {
  visible: false,
  residentId: 0
})

// 定义emits
const emit = defineEmits<{
  'update:visible': [value: boolean]
}>()

// 响应式数据
const loading = ref(false)
const residentInfo = ref<any>(null)
const relationList = ref<any[]>([])

// 计算属性
const visible = computed({
  get: () => props.visible,
  set: (value) => emit('update:visible', value)
})

// 住户类型映射
const residentTypeMap = {
  1: { text: '户主', type: 'success' },
  2: { text: '家庭成员', type: 'warning' },
  3: { text: '租客', type: 'info' },
  4: { text: '其他', type: 'default' }
}

// 住户状态映射
const residentStatusMap = {
  1: { text: '正常入住', type: 'success' },
  2: { text: '临时离开', type: 'warning' },
  3: { text: '已搬出', type: 'danger' },
  4: { text: '待审核', type: 'info' }
}

// 关系类型映射
const relationTypeMap = {
  1: '夫妻',
  2: '父子',
  3: '母子',
  4: '兄弟',
  5: '姐妹',
  6: '其他'
}

// 获取性别文本
const getGenderText = (gender: number) => {
  return gender === 1 ? '男' : gender === 0 ? '女' : '-'
}

// 获取住户类型文本
const getResidentTypeText = (type: number) => {
  return residentTypeMap[type as keyof typeof residentTypeMap]?.text || '未知'
}

// 获取住户类型标签样式
const getResidentTypeTagType = (type: number) => {
  return residentTypeMap[type as keyof typeof residentTypeMap]?.type || 'info'
}

// 获取住户状态文本
const getResidentStatusText = (status: number) => {
  return residentStatusMap[status as keyof typeof residentStatusMap]?.text || '未知'
}

// 获取住户状态标签样式
const getResidentStatusTagType = (status: number) => {
  return residentStatusMap[status as keyof typeof residentStatusMap]?.type || 'info'
}

// 获取关系类型文本
const getRelationTypeText = (type: number) => {
  return relationTypeMap[type as keyof typeof relationTypeMap] || '未知'
}

// 加载住户详情
const loadResidentDetail = async () => {
  if (!props.residentId) return
  
  try {
    loading.value = true
    const response = await residentApi.getResidentById(props.residentId)
    residentInfo.value = response.data
    
    // 加载住户关系
    await loadResidentRelations()
  } catch (error) {
    showMessage({ type: 'error', message: '加载住户详情失败' })
    residentInfo.value = null
  } finally {
    loading.value = false
  }
}

// 加载住户关系
const loadResidentRelations = async () => {
  try {
    const response = await residentApi.getResidentRelations(props.residentId)
    relationList.value = Array.isArray(response.data) ? response.data : []
  } catch (error) {
    console.error('加载住户关系失败:', error)
    relationList.value = []
  }
}

// 关闭抽屉
const handleClose = () => {
  visible.value = false
  residentInfo.value = null
  relationList.value = []
}

// 监听visible变化
watch(() => props.visible, (newVisible) => {
  if (newVisible && props.residentId) {
    loadResidentDetail()
  }
})
</script>

<style scoped>
.resident-detail {
  padding: 20px;
}

.relation-section {
  margin-top: 30px;
}

.relation-section h4 {
  margin-bottom: 15px;
  color: #303133;
  font-size: 16px;
  font-weight: 500;
}
</style> 